<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<view class="group-item flex column align-center m-t-30">
			<view class="spu-list" v-if="spu.length > 0">
				<block v-for="(item, index) in spu" :key="index">
					<view class="spu-item">
						<view class="sku-name-bg flex align-center just-between">
							<input class="input f-30" placeholder="请输入规格类型" placeholder-class="place" :value="item.title"
								@input="onSkuNameInput($event, index)" />

							<view class="delete-bg flex align-center" @click="onDelete(index)">
								<image class="img" :src="$staticImagePath('common/delete_gray.png')" />

								<view class="f-26">删除</view>
							</view>
						</view>

						<view class="spu-sub-list flex">
							<block v-for="(subItem, idx) in item.skuitem" :key="idx">
								<view class="sub-item flex align-center">
									<input class="input f-26" :value="subItem.name"
										@input="onSubItemInput($event, index, idx)" />

									<view class="close-bg" @click="onDeleteSubItem(index, idx)">
										<image class="img" :src="$staticImagePath('common/close.png')" />
									</view>
								</view>
							</block>

							<view class="sub-item spu-sub-add f-26" @click="onAddSubItem(index)">+添加新规格</view>
						</view>
					</view>
				</block>
			</view>

			<view class="sku-list" v-if="value.length > 0">
				<block v-for="(item, index) in value" :key="index">
					<view class="sku-item">
						<view class="attr-name">{{ item.temp.join("、") }}</view>
						
						<view class="attr-list flex just-between">
							<view class="attr-item flex align-center">
								<text class="f-26 one">价格</text>
								
								<input class="input f-26" placeholder="价格" placeholder-class="place" type="digit" :value="item.price" @input="onAttrInput($event, index, 'price')" />
							</view>
							
							<view class="attr-item flex align-center">
								<text class="f-26 one">结算价</text>
								
								<input class="input f-26" placeholder="结算价" placeholder-class="place" type="digit" :value="item.cost_price" @input="onAttrInput($event, index, 'market_price')" />
							</view>
							
							<view class="attr-item flex align-center">
								<text class="f-26 one">库存</text>
								
								<input class="input f-26" placeholder="库存" placeholder-class="place" type="number" :value="item.kuc" @input="onAttrInput($event, index, 'kuc')" />
							</view>
							
							<view class="attr-item flex align-center">
								<text class="f-26 one">编码</text>
								
								<input class="input f-26" placeholder="编码" placeholder-class="place" :value="item.sn" @input="onAttrInput($event, index, 'sn')" />
							</view>
							
							<view class="attr-item flex align-center">
								<text class="f-26 one">重量</text>
								
								<input class="input f-26" placeholder="重量" placeholder-class="place" type="number" :value="item.weigh" @input="onAttrInput($event, index, 'weigh')" />
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="add-sku theme-gradient-btn f-34" @click="onAdd">新增规格</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: Array,
				default: [],
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 *
			 */
			spu: {
				type: Array,
				default: [],
			},
		},
		methods: {
			/**
			 * 新增规格
			 */
			onAdd() {
				if (this.spu.length > 0) {
					var last = this.spu[this.spu.length - 1];
					if (last.title === "") {
						this.$st.show("请输入规格类型");
						return;
					}
					if (last.skuitem.length === 0) {
						this.$st.show("请添加新规格");
						return;
					}
					if (last.skuitem[last.skuitem.length - 1].title === "") {
						this.$st.show("请输入子规格");
						return;
					}
				}

				let list = [...this.spu];
				list.push({
					title: "",
					skuitem: [],
				});
				this.updateSpuData(list);
			},
			/**
			 * 删除规格
			 */
			onDelete(index) {
				var list = [...this.spu];
				list.splice(index, 1);
				this.updateSpuData(list);
			},
			/**
			 * 规格名称输入
			 */
			onSkuNameInput(e, index) {
				var list = [...this.spu];
				list[index].title = e.detail.value;
				this.updateSpuData(list);
			},
			/**
			 * 添加子规格
			 */
			onAddSubItem(index) {
				var list = [...this.spu];
				if (list[index].skuitem.length > 0) {
					var last = list[index].skuitem[list[index].skuitem.length - 1];
					if (last.name === "") {
						this.$st.show("请输入子规格");
						return;
					}
				}
				list[index].skuitem.push({
					name: "",
				});
				this.updateSpuData(list);
			},
			/**
			 * 删除子规格
			 */
			onDeleteSubItem(index, idx) {
				var list = [...this.spu];
				list[index].skuitem.splice(idx, 1);
				this.updateSpuData(list);
				this.updateValue([]);
				this.onCalculation();
			},
			/**
			 * 子规格名称输入
			 */
			onSubItemInput(e, index, idx) {
				var list = [...this.spu];
				list[index].skuitem[idx].name = e.detail.value;
				this.updateSpuData(list);
				this.updateValue([]);
				this.onCalculation();
			},

			/**
			 * 计算
			 */
			async onCalculation() {
				var skuList = await this.getSkuListData();
				var lastArray = await this.getLastArray(skuList);
				var list = [];
				for (var i = 0; i < lastArray.length; i++) {
					let obj = {
						temp: lastArray[i].split(","),
						price: "",
						weigh: "",
						sn: "",
						kuc: "",
						cost_price: "",
					}
					list.push(obj);
				}
				this.updateValue(list);
			},
			/**
			 * 获取所有的排列组合
			 */
			getLastArray(skuList) {
				return new Promise(async (resolve) => {
					let lastArray = []
					for (let i = 0; i < skuList.length; i++) {
						let item = skuList[i]
						lastArray = await this.calculation(item, lastArray)
						// lastArray = bArray
						if (i == skuList.length - 1) {
							resolve(lastArray)
						}
					}
				})
			},
			calculation(item, oneArray) {
				return new Promise((resolve) => {
					let bArray = []
					for (let i = 0; i < item.length; i++) {
						let subItem = item[i]
						if (oneArray.length == 0) {
							bArray.push(subItem)
						} else {
							for (let j = 0; j < oneArray.length; j++) {
								let nextSubItem = oneArray[j]
								let value = nextSubItem + "," + subItem
								bArray.push(value)
							}
						}
						if (i == item.length - 1) {
							resolve(bArray)
						}
					}
				})
			},
			/**
			 * 获取sku名字数组
			 */
			getSkuListData() {
				var list = [...this.spu];
				return new Promise((resolve) => {
					let skuList = []
					for (let i = 0; i < list.length; i++) {
						let item = list[i]
						let array = []
						for (let j = 0; j < item.skuitem.length; j++) {
							let subItem = item.skuitem[j]
							let sku = subItem.name
							if (sku != "") {
								array.push(sku)
							}
						}
						skuList.push(array)

						if (i == list.length - 1) {
							resolve(skuList)
						}
					}
				})
			},
			
			/**
			 * 属性输出
			 */
			onAttrInput(e, index, type) {
				const value = e.detail.value;
				var list = [...this.value];
				
				list[index][type] = value;
				
				this.updateValue(list);
			},
			
			/**
			 * 更新value
			 */
			updateValue(list) {
				this.$emit("input", list);
			},
			/**
			 * 更新spu数组
			 */
			updateSpuData(list) {
				this.$emit("update:spu", list);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";

	.add-sku {
		width: 200rpx !important;
		height: 72rpx !important;
		line-height: 72rpx !important;
	}

	.spu-list {
		width: 100%;
		overflow: hidden;

		.spu-item {
			width: 100%;
			overflow: hidden;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0rpx;
			}

			.sku-name-bg {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #eeeeee;
				gap: 20rpx;
				overflow: hidden;

				.delete-bg {
					gap: 10rpx;
					color: #999;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.spu-sub-list {
				margin-top: 30rpx;
				margin-left: -20rpx;
				width: calc(100% + 40rpx);
				overflow: hidden;
				flex-wrap: wrap;

				.sub-item {
					width: 200rpx;
					height: 50rpx;
					margin-left: 20rpx;
					border-radius: 25rpx;
					margin-bottom: 20rpx;
					background-color: #f7f7f7;
					padding: 0 20rpx;
					box-sizing: border-box;
					gap: 15rpx;

					.close-bg {
						height: 26rpx;
						padding-left: 15rpx;
						overflow: hidden;
						border-left: 2rpx solid #dddddd;

						.img {
							width: 22rpx;
							height: 22rpx;
						}
					}
				}

				.spu-sub-add {
					line-height: 50rpx;
					text-align: center;
					color: #eb5c20;
				}
			}
		}
	}

	.sku-list {
		width: 100%;
		overflow: hidden;
		
		.sku-item {
			width: 100%;
			overflow: hidden;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #EEE;
			
			&:last-child {
				margin-bottom: 0rpx;
			}
			
			.attr-name {
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				width: fit-content;
				background-color: #f7f7f7;
				border-radius: 25rpx;
				overflow: hidden;
				color: #666666;
			}
			
			.attr-list {
				width: 100%;
				overflow: hidden;
				flex-wrap: wrap;
				
				.attr-item {
					margin-top: 20rpx;
					width: 50%;
					overflow: hidden;
					gap: 20rpx;
					
					.one {
						width: 40%;
						color: #121212;
					}
				}
			}
		}
	}

</style>